<template>
<div class="login-wrap">
    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container">
        <h3 class="title">快 餐 管 理 系 统</h3>
        <el-form-item prop="userAccount">
            <el-input type="text" style="width:80%;" v-model="ruleForm.userAccount" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="userPassword">
            <el-input type="password" style="width:80%;" v-model="ruleForm.userPassword" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <!-- <el-form-item style="width:100%;text-align:center;">
            <el-button type="primary" style="width:80%;background-color:#a11a1a;border:none;" onclick="location.href='http://localhost:9999/#/system/register'">注 &nbsp&nbsp&nbsp&nbsp 册</el-button>
        </el-form-item> -->
        <el-form-item style="width:100%;text-align:center;">
            <el-button type="primary" style="width:80%;background-color:#a11a1a;border:none;" @click="submitForm" :loading="logining">登录</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import * as api from '../api/interface'
export default {
    data() {
        return {
            //定义loading默认为false
            logining: false,
            //输入的数据--与实体属性名相同
            ruleForm: {
                userAccount: '',
                userPassword: ''
            },
            user: {},
            //rules前端验证，当输入框为空时
            rules: {
                userAccount: [{ required: true, message: '请输入账号', trigger: 'blur' }],
                userPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            }
        }
    },
    // 页面初始化操作
    created() {
        console.log("init success");
    },
    // 里面的函数只有调用才会执行
    methods: {
        submitForm(formName) {
            //对ref="ruleForm"进行表单验证的规则
            this.$refs.ruleForm.validate( valid => {
                if (valid) {
                    this.logining = true
                    api.requestLogin(this.ruleForm).then(data => {
                        this.logining = false;
                        if (data.message != "success") {
                          //查询不成功时设置，error为红色
                            this.logining = false;
                            this.$message.error(data.message)
                        } else {
                            this.user = data.returnObj
                          //正在登陆的用户的各种数据保存到前端
                            window.localStorage.setItem("userId", data.returnObj.userId)
                            window.localStorage.setItem("userType", data.returnObj.userType)
                            window.localStorage.setItem("userName", data.returnObj.userName)
                            this.$store.commit('login', this.user)
                            this.$router.push({
                              //前端路径
                                path: data.returnObj.userType == '0' ? '/user/usreList' :
                                    data.returnObj.userType == '1' ? '/order/orderList' :
                                    data.returnObj.userType == '2' ? '/food/foodList' :
                                    data.returnObj.userType == '3' ? '/material/materialList' :
                                    '/user/userList'
                            })
                        }
                    }).catch((error, status) => {
                        this.logining = false;
                    });
                } else {
                    this.$message.error('请输入用户名密码！')
                    this.logining = false;
                    return false;
                }
            })
        },
    }
}
</script>

<style scoped>
.login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url(../assets/img/bg.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
}

.login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 450px;
    padding: 40px 35px 35px 35px;
    background-color: rgba(255, 242, 242, 0.8);
    text-align: center;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #291f08;

    /*color:#a11a1a;*/
}

.remember {
    margin: 0px 0px 35px 0px;
}

.code-box {
    text-align: right;
}

.codeimg {
    height: 40px;
}
</style>
